<template>
	<div class="shop-cart">
		<div class="cart-header">
			<div class="cart-header-wrap">
				<div class="cart-title-box">
					<div class="cart-title">我的购物车</div>
					<div class="cart-count">共1门,已选择{{ num }}门</div>
				</div>
				<div class="order">我的订单</div>
			</div>
		</div>
		<div class="card-content">
			<div class="card-head">
				<el-checkbox v-model="checkedAll" @change="handleCheckAll">全选</el-checkbox>
				<div class="course-con">课程</div>
				<div class="price">金额</div>
				<div>操作</div>
			</div>
			<div class="card-list">
				<div class="card-item" v-for="item in shopList" :key="item.cartId">
					<el-checkbox v-model="item.checked" @change="handleCheck"></el-checkbox>
					<div class="course-con">
						<div class="course">
							<img :src="baseUrl+item.imageUrl" alt="" class="course-img">
							<div class="details">
								<div class="course-name">{{ item.title }}</div>
							</div>
						</div>
					</div>
					<div class="price">￥{{ item.price }}</div>
					<div class="close"><i class="el-icon-close"></i></div>
				</div>
			</div>
			<div class="card-total-wrap">
				<div class="card-total">
					<div class="card-count">已选{{ num }}件商品</div>
					<div class="card-price-label">总计金额: </div>
					<div class="card-price">￥{{ total }}</div>
					<el-button type="danger" @click="handleConfirmOrder()">去结算</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import user from '@/store/modules/user'
import { listCourse, listCart } from '@/api/web/index'
export default {
	name: 'ShopCart',
	data() { 
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			//全选
			checkedAll: false,
			checkedShops: [],
			//课程列表
			courseList: [],
			//购物车商品列表
			shopList: [],
			//总金额
			num: 0,
			total: 0
		}
	},
	mounted() { 
		this.queryCourseList();
	},
	methods: {
		/**
		 * 查询课程列表
		 */
		async queryCourseList() { 
			let res = await listCourse();
			if (res.code == 200) {
				this.courseList = res.rows;
				this.querySopCart();
			}
		},
		/**
		 * 查询购物车
		 */
		 async querySopCart() { 
			let res = await listCart({
				userId: user.state.id
			});
			 if (res.code == 200) { 
				let dataList = res.rows;
				 this.courseList.forEach(course => { 
					dataList.forEach(item => { 
						if (item.courseId == course.id) { 
							item['title'] = course.title;
							item['imageUrl'] = course.imageUrl;
							item['price'] = course.price;
							item['checked'] = false;
						}
					})
				})
				 this.shopList = res.rows;
				console.log('this.shopList',this.shopList)
			}
		},
		/**
		 * 确认订单
		 */
		handleConfirmOrder() { 
			localStorage.setItem('shopList', JSON.stringify(this.shopList));
			localStorage.setItem('shopTotal', this.total)
			if (this.total > 0) {
				this.$router.push('/order');
			} else { 
				this.$message({
					message: '请勾选课程',
					type: 'warning'
				})
			}
		},
		/**
		 * 全选监听
		 */
		handleCheckAll(val) { 
			this.shopList.forEach(item => {
				item.checked = val;
			})
			if (val === true) {
				this.total = 0;
				this.num = this.shopList.length;
				this.shopList.forEach(item => {
					item.checked = val;
					this.total += item.price;
				})
			} else { 
				this.num = 0;
				this.total = 0;
			}
		},
		/**
		 * 选择监听
		 * @param val 
		 */
		handleCheck(val) { 
			this.total = 0;
			this.num = 0;
			let checkAll = true;
			this.shopList.forEach(item => {
				if (item.checked === true) {
					this.total += item.price;
					this.num++;
				} else { 
					checkAll = false;
				}
			})
			this.checkedAll = checkAll;
		}
	}
}
</script>

<style lang="scss" scoped>
.shop-cart {
	width: 100%;
	.cart-header {
		width: 100%;
		height: 160px;
		background-image: url('~@/assets/images/cart-header-bg.jpg');
		.cart-header-wrap {
			display: flex;
			width: 1230px;
			height: 100%;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 auto;
		}
		.cart-title-box {
			display: flex;
			color: #07111b;
			flex-direction: row;
			height: 115px;
			.cart-title {
				font-size: 32px;
				line-height: 115px;
				margin-right: 25px;
				font-weight: 200;
			}
			.cart-count {
				line-height: 115px;
			}
		}
		.order {
			line-height: 115px;
			color: #5e5e5e;
			font-weight: 200;
			cursor: pointer;
		}
	}
	.card-content {
		width: 1230px;
		padding: 0 36px 32px;
		background-color: #fff;
		margin: -40px auto 0 auto;
		box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .1);
		border-radius: 8px;
		.card-head {
			width: 100%;
			height: 70px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #dcdfe6;
			color: #5e5e5e;
			.course-con {
				flex: 1;
				padding-left: 50px;
			}
			.price {
				width: 160px;
				text-align: center;
			}
		}
		.card-list {
			width: 100%;
			padding: 15px 0;
			color: #5e5e5e;
			.card-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding: 20px 0;
				align-items: center;
				.course {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.course-con {
					flex: 1;
					padding-left: 50px;
					.course-name {
						font-size: 16px;
						color: #07111b;
						padding-left: 20px;
					}
				}
				.price {
					width: 160px;
					color: #1c1f21;
					font-weight: 600;
					text-align: center;
				}
				.course-img {
					width: 160px;
					height: 90px;
				}
				.close {
					font-size: 18px;
					font-weight: 600;
					cursor: pointer;
				}
			}
		}
		.card-total-wrap {
			width: 100%;
			height: 70px;
			display: flex;
			border-top: 1px solid #dcdfe6;
			flex-direction: row;
			justify-content: flex-end;
			.card-total {
				height: 70px;
				display: flex;
				flex-direction: row;
				align-items: center;
				.card-count {
					margin-right: 30px;
					font-size: 14px;
					color: #07111b;
				}
				.card-price-label {
					font-size: 14px;
					color: #07111b;
				}
				.card-price {
					padding: 0 20px;
					font-size: 16px;
					color: #F01414;
					font-weight: 600;
				}
			}
		}
	}
}
</style>